<template>
  <div class="topbarcom">
    <div class="city">西安</div>
    <div class="txt" @click="go()">
      <img src="../assets/logo1.png" alt="" />
      <span></span>
      <van-icon name="search" class="icon" />
      <div class="content">立柜式空调</div>
    </div>
    <div class="login" @click="mylogin()">登录</div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Toast } from 'vant';
Vue.use(Toast)
export default {
  methods: {
    mylogin() {
      var token = localStorage.getItem("token");
      if (token) {
        Toast("您已登录，无需重复登录");
      } else {
        this.$router.push("/login");
      }
    },
    go() {
      this.$router.push("search");
    },
  },
};
</script>

<style lang="scss" scoped>
.topbarcom {
  // position: fixed;
  // left: 0;
  // top: 0;
  // z-index: 100;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.3333rem 0.8333rem;
  font-size: 0.7222rem;
  background-color: rgb(255, 103, 103);
  color: #fff;
  box-sizing: border-box;
  .txt {
    background-color: #fff;
    border-radius: 0.8333rem;
    height: 1.6667rem;
    width: 15.2778rem;
    position: relative;
  }
  img {
    margin-left: 0.8333rem;
    width: 2.2222rem;
  }
  span {
    height: 1.3889rem;
    background-color: rgb(118, 117, 117);
    width: 0.0556rem;
    display: inline-block;
    position: absolute;
    margin-left: 0.4444rem;
    margin-top: 0.1667rem;
  }
  .icon {
    color: rgb(118, 117, 117);
    font-size: 1.1111rem;
    margin-left: 0.7222rem;
    top: 0.3333rem;
    position: absolute;
  }
  .content {
    font-size: 0.7222rem;
    color: rgb(118, 117, 117);
    position: absolute;
    top: 0.3333rem;
    left: 5rem;
  }
}
</style>